import React from 'react';
import { Button } from 'antd';
import { WeaDialog, WeaUpload, WeaSearchGroup, WeaLocaleProvider } from 'ecCom';
import { observer } from 'mobx-react';
import DetailImportStore from '../../stores/card/DetailImport';
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;
export interface DetailImportProps {
    detailImport: DetailImportStore;
    iconInfo?: any;
    ecme: any;
}

@observer
export default class DetailImport extends React.Component<DetailImportProps, any> {
    render() {
        const { detailImport,ecme } = this.props;
        const {uploadParams} = detailImport;
        let {applyToModel,downloadTemplate} = detailImport;
        let layoutid = uploadParams.layoutid;
        if(layoutid == undefined){
            layoutid = '0';
        }
        const param={layoutid:layoutid,formId:uploadParams.formId,modeid:uploadParams.modeId,cardtype:uploadParams.type,billid:uploadParams.billid}
       
       // const href = `/weaver/weaver.formmode.data.FileDownload?type=detailimport_excel&layoutid=${ layoutid}&formId=${ uploadParams.formId}&modeid=${ uploadParams.modeId}&cardtype=${uploadParams.type}&billid=${uploadParams.billid} `;
        const uploadUrl = ecme.boolean === false ? detailImport.importUrl : `/api/doc/upload/uploadFile2Doc?category=${ecme.category}`;//督办用
        return (
            <div className="cube-detail-import">
                <WeaSearchGroup col={1} needTigger={true} showGroup={true} title={getLabel(28576, "下载模板")} items={[{
                    com: (
                        [<div className="form-item">
                            <div style={{ marginRight: 10 }}><p>1）{getLabel(28576, "下载模板")}</p></div>
                            <div>
                              
                                 <span onClick={()=>downloadTemplate({...param})} style={{ color: 'blue',cursor:'pointer' }}>{detailImport.modename}</span>
                            </div>
                        </div>,
                        <div className="form-item" >
                            <div style={{ marginRight: 10 }}><p>2）{getLabel(16630, "上传Excel")}</p></div>
                            <div >
                                <WeaUpload
                                    key={detailImport.random}
                                    uploadUrl={uploadUrl}
                                    uploadParams={toJS(detailImport.uploadParams)}
                                    category='string'
                                    maxUploadSize={0}
                                    maxFilesNumber={1}
                                    limitType='xls,xlsx'
                                    autoUpload={false}
                                    // onUploading={detailImport.uploading}
                                    getShowListDatas={detailImport.getShowListDatas}
                                    onChange={detailImport.uploadChange}
                                >
                                    <Button size="small" loading={detailImport.loading} >{getLabel(125333, "选择文件")}</Button>
                                    <span>{detailImport.selectedFile}</span>
                                </WeaUpload>
                            </div>
                        </div>]
                    )
                }]} />
                <WeaSearchGroup col={1} needTigger={true} showGroup={true} title={getLabel(27577, "操作步骤")} items={[{
                    com: (
                        [<div className="form-item1">
                            <div>1）{getLabel(27578, "请先下载")}   <span onClick={()=>downloadTemplate({...param})} style={{ color: 'blue',cursor:'pointer' }}>{detailImport.modename}</span> {getLabel(27579, '进行填写导入明细内容，第一行为表单明细字段的名称。')}</div>
                            <div>2）{getLabel(27580, '请在第2步中选择填写好的Excel文件，并点击右键菜单中')}+{getLabel(26255, '明细导入')}</div>
                        </div>]
                    )
                }]} />
                <WeaSearchGroup col={1} needTigger={true} showGroup={true} title={getLabel(27581, '使用注意事项')} items={[{
                    com: (
                        <div className="form-item1">
                            <p>1）{getLabel(387780, '导入明细数据时会在原有明细上追加.')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>2）{getLabel(27583, '只有可编辑的字段才能进行导入，如果查看的字段有默认值的会自动加上默认值。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>3）{getLabel(27584, '模板中第一行为表单明细字段名称，从第二行开始导入明细数据。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>4）{getLabel(27585, '明细数据之间不能有空行。')}<span style={{ color: "red" }}>{"(" + getLabel(131820, '存在空行时仅会导入空行以上的数据，空行以下的数据不会导入') + ")"}</span></p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>5）{getLabel(27586, '如果有多个明细时模板中会有多个SHEET，一个明细一个SHEET。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>6）{getLabel(27587, '数字类型字段不要有特殊格式，例如：科学计数法，千分位，货币符号等。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>7）{getLabel(82723, '浏览类型字段直接输入名称或主键，例如：人力资源字段直接输入人员名称或主键。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>8）{getLabel(27589, 'check类型字段输入“1/0”或“是/否”。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>9）{getLabel(27590, '下拉选择框类型字段输入下拉选择框显示名称。(百分比格式的需要改为文本格式)')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>10）{getLabel(126320, '日期类型字段导入时模板中需改为日期格式。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>11）{getLabel(126429, '人力资源字段支持编号导入，excel模板中的格式为：workcode_具体编号。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1">
                            <p>12）{getLabel(130475, '部门字段支持编号导入，excel模板中的格式为：deptcode_具体的编号。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>13）{getLabel(126435, '导入虚拟部门、分部，数据需以virtual_开头，例如：virtual_泛微。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>14）{getLabel(128659, '模板中红色区域的内容不允许修改，新增行的数据ID必须为空。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>15）{getLabel(127710, '浏览类型字段根据名称导入，如果名称为整数，则需要加上前缀name_，例如：name_名称。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>16）{getLabel(514632,'自定义浏览框类型字段根据主键导入，如果主键非整数，则需要加上前缀key_，例如：key_主键。')}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>17）{getLabel(510221, "分部，部门，人员字段支持A>B>C格式导入数据。例如，分部：分部>分部；部门：分部>分部>部门；人员：分部>部门>人员")}</p>
                        </div>
                    )
                }, {
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>18）{getLabel(388767, "自定义多选（树形多选）导入时，如果内容中包含英文逗号，请用DH{}包裹，如DH{A,B}。")}</p>
                        </div>
                    )
                },{
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>19）{getLabel(519411, "人员字段导入时，如果要导入解聘、离职、退休、无效的人员时，请用加上LZRY_前缀，例如：LZRY_张三")}</p>
                        </div>
                    )
                },{
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>20）{getLabel(520218, "附件，图片支持根据文档id、文档名称、目录1>目录2>文档名称进行导入，如果文档名称为整数，则需要加上前缀name_，例如：name_文档名称（填写全路径时无需添加前缀）。")}</p>
                        </div>
                    )
                },{
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>21）{getLabel('521677','树形浏览框支持按照对应的显示所有层级设置来导入')}</p>
                        </div>
                    )
                },                           
                {
                    com: (
                        <div className="form-item1" style={{ color: 'red' }}>
                            <p>22）{getLabel(521861,'树形浏览框类型字段支持主键导入，需要加上前缀tree_，格式为：tree_树节点id_数据id，例如：tree_226_1，其中tree为开头，226为树节点id，1为这条数据的id。')}</p>
                        </div>
                    )
                },{
                    com: (
                        <div className="form-item1" style={{ color: 'red',display:applyToModel=='1'?'':'none' }}>
                            <p>23）{getLabel(507718,"分部，部门支持按照组织字段显示层级设置来导入")+"，"+getLabel('520811','其中分部优先简称导入，部门优先全称导入')}</p>
                        </div>
                    )
                }]} />
            </div>
        )
    }
}

@observer
export class DetailImportDialog extends React.Component<DetailImportProps, any> {
    render() {
        const { detailImport, iconInfo = {} } = this.props;

        const buttons = detailImport && [<Button icon="cross" onClick={detailImport.onCancel}>{getLabel(309, '关闭')}</Button>,
        <Button type="primary" icon="save" loading={detailImport.loading} disabled={!detailImport.canUpload} onClick={detailImport.onOk}>{getLabel(26255, '明细导入')}</Button>]
        return (
            detailImport ? <WeaDialog
                className='wea-auth-modal cube-dialog'
                buttons={buttons}
                title={getLabel(26255, '明细导入')}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon || 'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                visible={detailImport.visible}
                style={{ width: 800, height: Math.min(580, document.documentElement.clientHeight * 0.8) }}
                hasScroll={true}
                onCancel={detailImport.onCancel}
            >
                <DetailImport detailImport={detailImport} ecme={{boolean:false}}/>
            </WeaDialog > : null
        )
    }
}